.title-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 63.64px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #4636ff 0%, #cb70ff 38.43%, #30e0ff 68.99%, #4c95fc 100%);
  border-image-slice: 1;
}
.title-bar .top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.title-bar .top-bar .icon {
  width: 30px;
  height: 53px;
  background-image: url('@/assets/back-icon.png');
  background-size: cover;
}
.title-bar .top-bar .title {
  margin-left: 18px;
  margin-top: 32px;
  width: 130px;
  height: 29px;
  opacity: 1;
  background-image: url('@/assets/back-title.png');
  background-size: cover;
}
.title-bar .group {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 150px;
  height: 44px;
  margin-top: 10px;
  margin-right: 5px;
}
.title-bar .group .icon1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/titleBar/login.png');
  background-size: cover;
  width: 74px;
  height: 44px;
}
.title-bar .group .icon2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/titleBar/sign.png');
  background-size: cover;
  width: 74px;
  height: 44px;
}
.title-bar .group-active {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 238px;
  height: 58px;
  margin-top: 10px;
  margin-right: 5px;
}
.title-bar .group-active .icon1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/login-right1.png');
  background-size: cover;
  width: 180px;
  height: 27px;
  margin-right: 5px;
}
.title-bar .group-active .avartar {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin-bottom: 5px;
}
.title-bar .group-active .avartar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
